<template>
  <view>


    <!-- 提交搜索弹窗 -->
    <u-popup
        :show="condition.show"
        :round="10"
        mode="bottom"
        :direction=0
        :closeable=true
        @close="condition.close()"
    >
      <view>
        <view style="text-align: center;margin: 10px 0 20px 0 ">
          <text style="font-size: 34rpx;font-weight: bold">
            填充筛选条件(不填的条件不参与判断)
          </text>
        </view>
        <view style="margin: 10px 10px">
          <u--form labelPosition="left" labelWidth="auto">

            <u-form-item label="活动标题(包含) : " borderBottom>
              <u--textarea
                  v-model="condition.data.title"
                  :clearable=true
                  :autoHeight=true
                  :maxlength=30
                  type="number"
                  :count=true
              >
              </u--textarea>
            </u-form-item>

            <u-form-item label="活动状态 : " borderBottom>
              <u-tag
                  :text=options.status.text
                  plain
                  type="success"
                  @click="options.status.open()"
              >
              </u-tag>
            </u-form-item>

            <u-form-item label="创建时间范围:">
              <view style="z-index:10000">
                <uni-datetime-picker
                    hide-second="true"
                    type="datetimerange"
                    v-model="condition.data.createTime.value"
                    @change="condition.data.createTime.change"
                    rangeSeparator="至" />
              </view>
            </u-form-item>

            <view>
              <u-row gutter="1">
                <u-col :span="6">
                  <u-button type="success" text="清空" @click="condition.def()"></u-button>
                </u-col>
                <u-col :span="6">
                  <u-button type="primary" text="搜索" @click="condition.search()"></u-button>
                </u-col>
              </u-row>
            </view>
          </u--form>
        </view>
      </view>
    </u-popup>

    <!--  条件状态选择  -->
    <u-picker
        :show="options.status.show"
        :columns="options.status.ops"
        @confirm="options.status.confirm"
        @close="options.status.close"
        @cancel="options.status.close"
        closeOnClickOverlay="true"
        title="选择审核状态"
        keyName="text"
    >
    </u-picker>

    <!-- 排序条件选择器 -->
    <u-picker
        :show="listSortPicker.show"
        :columns="listSortPicker.options"
        @confirm="listSortPicker.confirm"
        @close="listSortPicker.close"
        @cancel="listSortPicker.close"
        title="选择某属性点击确定即可"
        :closeOnClickOverlay=true
        keyName="label"
    >
    </u-picker>

    <!-- 确认删除模态窗  -->
    <u-modal
        :show="modal.byDelete.show"
        confirmText="确认删除"
        cancelText="取消"
        :showCancelButton=true
        :closeOnClickOverlay=true
        @close="modal.byDelete.close()"
        @cancel="modal.byDelete.close()"
        @confirm="modal.byDelete.confirm()"
    >
      <view>
        <text style="Letter-spacing: 2px;color: #ff4757">
          {{ modal.byDelete.title }}
        </text>
      </view>
    </u-modal>

    <!-- 按钮 -->
    <view style="margin: 20rpx 0 0 20rpx">
      <view style="display: inline-block;margin-right: 10rpx">
        <u-button shape="circle" size="medium" @click="condition.open()">
          <text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
            条件搜索
          </text>
        </u-button>
      </view>

      <view style="display: inline-block;margin-right: 10rpx">
        <u-button shape="circle" size="medium" @click="listSortPicker.open()">
          <text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
            表格排序
          </text>
        </u-button>
      </view>
      <view style="
          display: inline-block;
          float: right;
          margin-right: 26rpx"
      >
        <u-button shape="circle" size="medium" type="primary" @click="gotoEditor()">
          <text style="font-size: 24rpx;
            font-weight: bold;
            color: #faf9f9;padding: 0 20rpx">
            添加活动
          </text>
        </u-button>
      </view>

    </view>

    <view
        style="margin: 20rpx 30rpx"
    >
      <uni-table
          border
          stripe
          :loading="table.loading"
          emptyText="没有检索到合适的数据噢."
      >
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="center">
            <text class="table-th-font">记录ID</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">创建时间</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">活动标题</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">状态</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">支持人数</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">收费金额</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">操作</text>
          </uni-th>
        </uni-tr>

        <uni-tr v-for="(item,index) in table.data " :key="index">
          <uni-td align="center">
            <text class="tb_td_font" style="font-weight: bold">
              {{ item.id }}
            </text>
          </uni-td>

          <uni-td align="center">
            <text class="tb_td_font">
              {{ service.style.time(item.createTime, 6) }}
            </text>
          </uni-td>

          <uni-td align="center">
            <text class="tb_td_font" id="text-flow">
              {{ item.title }}
            </text>
          </uni-td>

          <uni-td align="center">
            <rich-text class="tb_td_font" :nodes="style.status(item.status)">
            </rich-text>
          </uni-td>

          <uni-td align="center">
            <text class="tb_td_font">
              {{ item.registerCount === -1 ? '不限制' : item.registerCount }}
            </text>
          </uni-td>

          <uni-td align="center">
            <rich-text
                class="tb_td_font"
                :nodes="style.cost(item)"
            >
            </rich-text>
          </uni-td>

          <uni-td align="center">
            <view
                style="display: inline-block"
                class="operation-btn"
            >
              <u-button
                  size="small"
                  type="success"
                  text="详情"
                  @click="gotoEditor(item)"
              >
              </u-button>
            </view>

            <view
                style="display: inline-block"
                class="operation-btn">
              <u-button
                  size="small"
                  type="error"
                  text="删除"
                  @click="modal.byDelete.open(item.id)"
              >
              </u-button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>

    <!-- 分页 -->
    <view
        style="text-align: center"
    >
      <view style="display: inline-block;margin: 0 8rpx">
        <page-pagination
            :total="table.total"
            :pageSize="table.pageSize"
            :showAround="true"
            :btnText="true"
            :forceEllipses="true"
            @change="table.setPageNo">
        </page-pagination>
      </view>
    </view>

    <!--自己封装的提示器-->
    <popup ref="popup" />
  </view>
</template>

<script>
import popup from "@/merchant/my/my-popup"
import service from "@/utils/service";

export default {
  components: {popup},
  data() {
    let _vm = this;
    return {
      service: service,
      table: {
        loading: true,
        total: 0,
        pageSize: 10,
        pageNo: 1,
        data: [],
        setPageNo(v) {
          _vm.table.pageNo = v
          _vm.getList();
        },
      },
      // 表格排序选择器
      listSortPicker: {
        show: false,
        // 排序字段
        sortKey: null,
        // 排序规则 1 正序 -1 倒序
        sort: -1,
        options: [
          [
            {label: '默认', key: null},
          ],
          [
            {label: '从小到大', value: 1},
            {label: '从大到小', value: -1},
          ],
        ],
        // 确认回调
        confirm(v) {
          let me = _vm.listSortPicker;
          console.log("表格排序选项结果 : ", v)
          me.show = false;
          // 默认
          if (v.value[0].key === null) {
            me.sortKey = null
          } else {
            me.sortKey = v.value[0].key;
          }
          me.sort = v.value[1].value;
          this.getList();
        },
        close() {
          _vm.listSortPicker.show = false;
        },
        open() {
          _vm.listSortPicker.show = true;
        }
      },
      /* 条件筛选对象 */
      condition: {
        show: false,
        open() {
          _vm.condition.show = true;
        },
        close() {
          _vm.condition.show = false;
        },
        data: {
          /* 活动标题 */
          title: '',
          /* 活动状态 */
          status: '',
          /* 创建时间范围 */
          createTime: {
            value: [],
            change(e) {
              console.log("选中创建时间 : ", e)
            }
          }
        },
        def() {
          _vm.condition.data.title = ''
          _vm.condition.data.status = ''
          _vm.condition.data.createTime.value = []
          _vm.condition.search();
        },
        search() {
          console.log("点击搜索 条件 : ", _vm.condition.data)
          _vm.condition.close();
          _vm.getList();
        }
      },
      /* 选项相关对象 */
      options:{
        /* 活动状态 */
        status: {
          show: false,
          ops: [[
            {text:'进行中',value: 0},
            {text:'已结束',value: -1},
          ]],
          text:'点击选择活动状态',
          close(){
            _vm.options.status.show = false;
          },
          open(){
            _vm.options.status.show = true;
          },
          confirm(e){
            console.log("审核状态被选中 : ", e)
            _vm.options.status.show = false
            _vm.condition.data.status = e.value[0].value
            _vm.options.status.text = e.value[0].text
          },
          def(){
            _vm.options.status.text = '点击选择活动状态';
          }
        }
      },
      /* 加载对象 */
      loading: {
        // 进度
        plan: 0,
        // 阈值
        threshold: 0,
        step() {
          if (++this.plan >= this.threshold) {
            uni.hideLoading();
          }
        }
      },
      /* 样式对象 */
      style: {
        status(v) {
          switch (v) {
            case 0:
              return "<span style='color: #70a1ff'>进行中</span>"
            case -1:
              return "<span style='color: #ff4757'>已结束</span>"
          }
        },
        cost(item) {
          switch (item.hasCost) {
            case 1:
              return "<span style='color: #ffa502'>" + item.cost + "  元</span>"
            case 0:
              return "<span style='color: #ff7f50'>免费</span>"
          }
        }
      },

      /* 模态窗 */
      modal: {
        // 删除确认
        byDelete: {
          show: false,
          title: '确认删除该活动吗?',
          id: null,
          open(id = undefined) {
            _vm.modal.byDelete.id = id;
            _vm.modal.byDelete.show = true;
          },
          confirm() {
            _vm.deleteItem(_vm.modal.byDelete.id)
          },
          close() {
            _vm.modal.byDelete.show = false;
          }
        }
      }
    };
  },
  methods: {
    /* 跳转到编辑界面 */
    gotoEditor(item = undefined) {
      let url = 'editor';
      if (!service.check.isNull(item)) {
        url = url +  "?target='update'&id=" + item.id;
      }
      uni.navigateTo({
        url: url,
        fail(err) {
          console.log("跳转到编辑页失败 : ", err)
        }
      })
    },
    getList() {
      let _t = this;
      let data = {};
      data.pageSize = this.table.pageSize;
      data.pageNo = this.table.pageNo;
      // 如果有排序字段添加排序字段
      if(this.listSortPicker.sortKey !== null){
        data.sortKey = this.listSortPicker.sortKey;
      }
      if(this.listSortPicker.sort !== null){
        data.sort = this.listSortPicker.sort;
      }
      // 追加条件筛选对象
      let condition = _t.condition.data;
      if(!service.check.isNull(condition.title)){
        data.title = condition.title;
      }
      if(!service.check.isNull(condition.status)){
        data.status = condition.status;
      }
      if(!service.check.isNull(condition.createTime.value)){
        data.createTimeScope = JSON.stringify(condition.createTime.value);
      }
      this.$axios({
        url: 'merchant/merchantActivity/list',
        method: "post",
        data: data,
        header: {
          "Authorization": this.token,
          "Content-type": this.contentType,
          "type": "merchantsToken"
        },
      }).then(res => {
        console.log(" merchant/merchantActivity/list :  ", res)
        if (res.code === 0) {
          _t.table.data = res.result.list;
          _t.table.pageNo = res.result.pageNo;
          _t.table.total = res.result.total;
        } else {
          _t.$refs.popup.error("获取活动列表失败, 请重试 : " + res.message)
        }
      }).finally(() => {
        _t.table.loading = false;
        _t.loading.step();
      })
    },
    deleteItem(id) {
      let _t = this;
      uni.showLoading({
        title: "提交中",
        mask: true
      })
      this.$axios({
        url: 'merchant/merchantActivity/delete',
        method: "post",
        data: {id: id},
        header: {
          "Authorization": this.token,
          "Content-type": this.contentType,
          "type": "merchantsToken"
        },
      }).then(res => {
        console.log(" merchant/merchantActivity/delete :  ", res)
        if (res.code === 0) {
          _t.$refs.popup.success("删除成功")
          _t.getList();
        } else {
          _t.$refs.popup.error("删除失败 : " + res.result);
        }
      }).finally(() => {
        _t.modal.byDelete.close();
        uni.hideLoading();
      })
    }
  },
  onLoad() {
    // 获取图像地址前缀
    this.imgApi = this.$reqConfig.URLIMAGE
    // 获取请求头类型
    this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
    // 获取token
    this.token = uni.getStorageSync("merchantsToken").token
    uni.showLoading({
      title: '加载内容中.....',
      mask: true,
    });
    // 列表
    this.loading.threshold = 1;
  },
  onShow() {
    this.getList();
  }
}
</script>

<style lang="scss">
.table-th-font {
  font-size: 30rpx;
  color: #1c6f5c;
}

.operation-btn {
  margin: 2rpx 4rpx;
}

/*表头样式*/
.uni-table-th {
  background-color: #eff8ff;
  border: 1px #EBEEF5 solid;
}

/*内容样式*/
.uni-table-td {
  border: 1px #EBEEF5 solid;
}

/*表单 label*/
.u-form-item__body__left__content__label.data-v-067e4733 {
  font-size: 30rpx;
  font-weight: bold;
}

#text-flow {
  display: -webkit-box; /*弹性伸缩盒子模型显示*/
  -webkit-box-orient: vertical; /*排列方式*/
  -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
  overflow: hidden; /*溢出隐藏*/
}

.tb_td_font {
  font-size: 30rpx;
}
</style>
